<template>
  <el-card header="控制台" shadow="hover">
    <div class="statistic">
      <el-card shadow="hover" class="statistic-block">
        <div class="statistic-data">1048</div>
        <div class="statistic-title">今日浏览</div>
      </el-card>
      <el-card shadow="hover" class="statistic-block">
        <div class="statistic-data">201</div>
        <div class="statistic-title">今日下单</div>
      </el-card>
      <el-card shadow="hover" class="statistic-block">
        <div class="statistic-data">293</div>
        <div class="statistic-title">今日成交</div>
      </el-card>
      <el-card shadow="hover" class="statistic-block">
        <div class="statistic-data">79</div>
        <div class="statistic-title">今日售后</div>
      </el-card>
    </div>
    <div id="charts">
      <ve-line style="width: 50%; display: inline-block" :data="chartData" :settings="chartSettings"></ve-line>
      <ve-pie style="width: 50%; display: inline-block" :data="chartData1"></ve-pie>
    </div>
    <ve-map :data="chartData2"></ve-map>
  </el-card>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        chartSettings: {
          axisSite: { right: ['下单率'] },
        },
        chartData: {
          columns: ['日期', '浏览量', '下单量', '下单率'],
          rows: [
            { '日期': '1月1日', '浏览量': 1393, '下单量': 508, '下单率': 0.32 },
            { '日期': '1月2日', '浏览量': 3530, '下单量': 2330, '下单率': 0.26 },
            { '日期': '1月3日', '浏览量': 2923, '下单量': 1393, '下单率': 0.36 },
            { '日期': '1月4日', '浏览量': 1723, '下单量': 1086, '下单率': 0.31 },
            { '日期': '1月5日', '浏览量': 3792, '下单量': 2492, '下单率': 0.23 },
            { '日期': '1月6日', '浏览量': 2792, '下单量': 1204, '下单率': 0.35 },
            { '日期': '1月7日', '浏览量': 3562, '下单量': 2748, '下单率': 0.39 },
            { '日期': '1月8日', '浏览量': 3291, '下单量': 2908, '下单率': 0.42 },
            { '日期': '1月9日', '浏览量': 4012, '下单量': 2372, '下单率': 0.32 },
            { '日期': '1月10日', '浏览量': 3523, '下单量': 2907, '下单率': 0.45 }
          ]
        },
        chartData1: {
          columns: ['年龄', '数量'],
          rows: [
            { '年龄': '20以下', '数量': 2534 },
            { '年龄': '20-30', '数量': 3530 },
            { '年龄': '30-40', '数量': 2923 },
            { '年龄': '40-50', '数量': 2723 },
            { '年龄': '50-60', '数量': 1792 },
            { '年龄': '60以上', '数量': 1326 }
          ]
        },
        chartData2: {
          columns: ['位置', '用户量', '成交量'],
          rows: [
            { '位置': '吉林', '用户量': 15423, '成交量': 1233 },
            { '位置': '北京', '用户量': 1223, '成交量': 2323 },
            { '位置': '上海', '用户量': 21523, '成交量': 9346 },
            { '位置': '江苏', '用户量': 31145, '成交量': 7397 },
            { '位置': '湖南', '用户量': 11927, '成交量': 2493 },
            { '位置': '黑龙江', '用户量': 21093, '成交量': 3394 },
            { '位置': '湖北', '用户量': 21972, '成交量': 2936 },
            { '位置': '新疆', '用户量': 11025, '成交量': 1519 },
            { '位置': '广州', '用户量': 21534, '成交量': 9836 },
            { '位置': '甘肃', '用户量': 11534, '成交量': 2482 },
            { '位置': '台湾', '用户量': 19343, '成交量': 3373 },
            { '位置': '香港', '用户量': 13873, '成交量': 4302 },
            { '位置': '陕西', '用户量': 28883, '成交量': 1373 },
            { '位置': '西藏', '用户量': 16433, '成交量': 2383 },
            { '位置': '浙江', '用户量': 31412, '成交量': 7378 }
          ]
        }
      }
    }
  }
</script>

<style scoped>
  .statistic {
    display: flex;
    justify-content: space-between;
    text-align: center;
    border-bottom: 2px dashed lightgray;
  }
  .statistic-block {
    flex: 1;
    margin: 10px 20px 20px;
  }
  .statistic-data {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 10px;
  }
  #charts {
    margin-top: 30px;
    display: flex;
    flex-grow: 1;
    width: 100%;
    height: 100%;
    justify-content: space-between;
  }
</style>
